<template>
  <div 
    :class="[
      'bx-result',
      'bx-glass',
      {
        [`bx-result--${status}`]: status
      }
    ]"
  >
    <div class="bx-result__icon">
      <slot name="icon">
        <BxIcon :name="statusIcon" />
      </slot>
    </div>
    <div v-if="title || $slots.title" class="bx-result__title">
      <slot name="title">{{ title }}</slot>
    </div>
    <div v-if="description || $slots.description" class="bx-result__description">
      <slot name="description">{{ description }}</slot>
    </div>
    <div v-if="$slots.extra" class="bx-result__extra">
      <slot name="extra"></slot>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'
import BxButton from "../basic/BxButton.vue"
import BxIcon from "../basic/BxIcon.vue"

export default {
  name: 'BxResult',
  components: {
    BxIcon
  },
  props: {
    status: {
      type: String,
      default: 'info',
      validator: (value) => ['success', 'error', 'info', 'warning', '403', '404', '500'].includes(value)
    },
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const statusIcon = computed(() => {
      switch (props.status) {
        case 'success': return 'check-circle'
        case 'error': return 'x-circle'
        case 'warning': return 'alert-triangle'
        case '403': return 'lock'
        case '404': return 'alert-circle'
        case '500': return 'server'
        case 'info':
        default: return 'info'
      }
    })

    return {
      statusIcon
    }
  }
}
</script>

<style scoped>
.bx-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  border-radius: var(--bx-radius-medium);
  font-family: var(--bx-font-family);
  color: var(--bx-text-primary);
  text-align: center;
}

.bx-result__icon {
  font-size: 72px;
  margin-bottom: 24px;
}

.bx-result--success .bx-result__icon { color: green; }
.bx-result--error .bx-result__icon { color: red; }
.bx-result--info .bx-result__icon { color: rgba(0, 122, 255, 0.8); }
.bx-result--warning .bx-result__icon { color: orange; }
.bx-result--403 .bx-result__icon { color: var(--bx-text-tertiary); }
.bx-result--404 .bx-result__icon { color: var(--bx-text-tertiary); }
.bx-result--500 .bx-result__icon { color: var(--bx-text-tertiary); }

.bx-result__title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
}

.bx-result__description {
  font-size: 14px;
  color: var(--bx-text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.bx-result__extra {
  margin-top: 24px;
}

/* Responsive */
@media (max-width: 768px) {
  .bx-result {
    padding: 32px 16px;
  }
  .bx-result__icon {
    font-size: 60px;
    margin-bottom: 16px;
  }
  .bx-result__title {
    font-size: 20px;
    margin-bottom: 12px;
  }
  .bx-result__description {
    font-size: 13px;
    margin-bottom: 16px;
  }
}
</style>

